import React, { useState,useEffect } from 'react';
import { Table , Checkbox,Button, Modal,Input,Form, message } from 'antd';
import { useNavigate } from 'react-router-dom';
import { warehousingmanagement_patch,DeliveryManagement_patch,warehousemanagement_add,warehousemanagement_table } from '../../tools/api';
import Mapp from './Map'

function Table1(props) {
  var navigate=useNavigate()
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
  const [arr, setarr] = useState([]);
  const [location, setlocation] = useState([40.312667,116.648808]);
  const [list, setlist] = useState([]);
  const [name, setname] = useState('');
  const [value1, setvalue1] = useState('');
  const [value2, setvalue2] = useState('');
  const [value3, setvalue3] = useState('');
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [isModalOpen1, setIsModalOpen1] = useState(false);
  const [isModalOpen2, setIsModalOpen2] = useState(false);
  const [isModalOpen3, setIsModalOpen3] = useState(false);
  const [loading, setloading] = useState(false);
  const [messageApi, contextHolder] = message.useMessage();
  useEffect(()=>{
    setloading(props.loading)
  },[props.loading])
// 提示
  const success = (text) => {
    messageApi.open({
      type: 'success',
      content: text,
    });
  };
  const error = (text) => {
    messageApi.open({
      type: 'error',
      content: text,
    });
  };

  //修改状态
  var changestate=(record)=>{
    if(props.status==1){
      if(record.warehouse){
        warehousingmanagement_patch(record.key,{status:'已入库'}).then((res)=>{
          props.datasource()
          success("修改状态成功")
          setloading(true);
          setTimeout(() => {
              setloading(false)
          }, 500);
        })
      }else{
        error("数据不全修改状态失败，请补充完成数据后重新确认")
      }
    }else{
      if(record.warehouse){
        DeliveryManagement_patch(record.key,{recstate:'true'}).then((res)=>{
          props.datasource()
          success("商品已完成出库")
          setloading(true);
          setTimeout(() => {
              setloading(false)
          }, 500);
        })
      }else{
        error("数据不全无法出库，请补充完成数据后重新确认")
      }
    }
  }
  
// 表头数据
    var columns1 = [
        {
            title: '入库日期',
            dataIndex: 'dateString',
            key: 'dateString',
            align:'center',
          },
          {
            title: '入库单编号',
            dataIndex: 'number',
            key: 'number',
            align:'center',
          },
          {
            
            title: '采购单编号',
            dataIndex: 'purchase',
            key: 'purchase',
            align:'center',
            render: (text) => <a style={{color:'gray'}}>{text}</a>,
          },
          {
            title: '入库状态',
            dataIndex: 'status',
            key: 'status',
            align:'center',
          },
          {
            title: ' 入库类型',
            dataIndex: 'type',
            key: 'type',
            align:'center',
          },
          {
            title: '供应商编号',
            dataIndex: 'supplier',
            key: 'supplier',
            align:'center',
          },
          {
            title: '入货仓库',
            dataIndex: 'warehouse',
            key: 'warehouse',
            align:'center',
          },
          {
            title: ' 收货员',
            dataIndex: 'receipt',
            key: 'receipt',
            align:'center',
          },
          {
            title: ' 仓管员',
            dataIndex: 'storeKeeper',
            key: 'storeKeeper',
            align:'center',
          },
      {
        title: '操作',
        key: 'action',
        align:'center',
        render: (_, record) => (
          <>
          {record.status=='已入库'?'':<a onClick={()=>{changestate(record)}} style={{fontSize:12+'px',background:'red',color:'white',padding:4+'px',borderRadius:2+'px'}}>入库完成确认</a>}
          </>
        ),
      },
    ];
    var columns2 = [
        {
            title: '出库日期',
            dataIndex: 'dateString',
            key: 'dateString',
            align:'center',
          },
          {
            title: '订单编号',
            dataIndex: 'number',
            key: 'number',
            align:'center',
          },
          {
            
            title: '配送方式',
            dataIndex: 'delivery',
            key: 'delivery',
            align:'center',
          },
          {
            title: '收货人',
            dataIndex: 'receipt',
            key: 'receipt',
            align:'center',
          },
          {
            title: ' 收货人联系方式',
            dataIndex: 'phone',
            key: 'phone',
            align:'center',
          },
          {
            title: '配送区域',
            dataIndex: 'region',
            key: 'region',
            align:'center',
          },
          {
            title: '出货仓库',
            dataIndex: 'warehouse',
            key: 'warehouse',
            align:'center',
          },
          {
            title: ' 仓管员',
            dataIndex: 'people',
            key: 'people',
            align:'center',
          },
          {
            title: ' 打包员',
            dataIndex: 'storeKeeper',
            key: 'storeKeeper',
            align:'center',
          },
      {
        title: '操作',
        key: 'action',
        align:'center',
        render: (_, record) => (
          <>
          {record.recstate=='true'?<a onClick={()=>{changestate(record)}} style={{fontSize:12+'px',background:'red',color:'white',padding:4+'px',borderRadius:2+'px'}}>已完成出库</a>:
          <a onClick={()=>{changestate(record)}} style={{fontSize:12+'px',background:'red',color:'white',padding:4+'px',borderRadius:2+'px'}}>出库完成确认</a>}
          </>
        ),
      },
    ];
    var columns3 = [
      {
          title: '仓库编号',
          dataIndex: 'key',
          key: 'key',
          align:'center',
        },
        {
          title: '仓库名称',
          dataIndex: 'name',
          key: 'name',
          align:'center',
        },
        {
          
          title: '仓库位置',
          dataIndex: 'position',
          key: 'position',
          align:'center',
        },
        {
          title: '仓管员',
          dataIndex: 'storeKeeper',
          key: 'storeKeeper',
          align:'center',
        },
        {
          title: ' 区域数量',
          dataIndex: 'regionnumber',
          key: 'regionnumber',
          align:'center',
        },
        {
          title: '货架数量',
          dataIndex: 'goodsnumber',
          key: 'goodsnumber',
          align:'center',
        },
        {
          title: '库位预警值',
          dataIndex: 'warning',
          key: 'warning',
          align:'center',
        },
    {
      title: '操作',
      key: 'action',
      align:'center',
      render: (_, record) => (
        <>
          <a style={{fontSize:12+'px',background:'orange',color:'white',padding:4+'px',borderRadius:2+'px',marginRight:6+'px'}} onClick={()=>{addregion(record)}}>新增区域</a>
          <a style={{fontSize:12+'px',background:'orange',color:'white',padding:4+'px',borderRadius:2+'px'}} onClick={()=>{show(record)}}>显示位置</a>
        </>
      ),
    },
  ];
    var columns4 = [
      {
          title: '仓库',
          dataIndex: 'Warehouse',
          key: 'Warehouse',
          align:'center',
        },
        {
          title: '区域',
          dataIndex: 'region',
          key: 'region',
          align:'center',
        },
        {
          
          title: '货架号',
          dataIndex: 'goodsshelves',
          key: 'goodsshelves',
          align:'center',
        },
        {
          title: '库位号',
          dataIndex: 'locator',
          key: 'locator',
          align:'center',
        },
        {
          title: ' 存放品类',
          dataIndex: 'type',
          key: 'type',
          align:'center',
        },
        {
          title: '商品名称',
          dataIndex: 'name',
          key: 'name',
          align:'center',
        },
        {
          title: '单位',
          dataIndex: 'company',
          key: 'company',
          align:'center',
        },
        {
          title: ' 在库数量',
          dataIndex: 'number',
          key: 'number',
          align:'center',
        },
  ];
    var columns5 = [
      {
          title: '仓库',
          dataIndex: 'Warehouse',
          key: 'Warehouse',
          align:'center',
        },
        {
          title: '品牌',
          dataIndex: 'brand',
          key: 'brand',
          align:'center',
        },
        {
          
          title: '商品名称',
          dataIndex: 'name',
          key: 'name',
          align:'center',
        },
        {
          title: '规格',
          dataIndex: 'Specifications',
          key: 'Specifications',
          align:'center',
        },
        {
          title: ' 单位',
          dataIndex: 'company',
          key: 'company',
          align:'center',
        },
        {
          title: '可用量',
          dataIndex: 'available',
          key: 'available',
          align:'center',
        },
        {
          title: '库存数',
          dataIndex: 'stock',
          key: 'stock',
          align:'center',
        },
        {
          title: ' 占用库位',
          dataIndex: 'occupy',
          key: 'occupy',
          align:'center',
        },
  ];
    var columns6 = [
      {
          title: '仓库名称',
          dataIndex: 'warehousename',
          key: 'warehousename',
          align:'center',
        },
        {
          title: '区域名称',
          dataIndex: 'areaname',
          key: 'areaname',
          align:'center',
        },
        {
          
          title: '品类',
          dataIndex: 'category',
          key: 'category',
          align:'center',
        },
        {
          title: '商品名称',
          dataIndex: 'goodsname',
          key: 'goodsname',
          align:'center',
        },
        {
          title: ' 占用库位',
          dataIndex: 'company',
          key: 'company',
          align:'center',
        },
        {
          title: '占用库位比例',
          dataIndex: 'proportion',
          key: 'proportion',
          align:'center',
        },
  ];

var go=(value)=>{
    console.log(value);
}

  var footer=()=>{
    return(
        <>
        <Checkbox onChange={(e)=>changestatus(e)}>全选</Checkbox>
        <Button style={{marginLeft:10+'px',display:'inline-block',background:'gray',textAlign:'center',color:'white',fontSize:14+'px',cursor:'pointer'}} onClick={(e)=>showModal(e)} disabled={selectedRowKeys.length==0} >指派</Button>
        <Button style={{marginLeft:10+'px',display:'inline-block',background:'gray',textAlign:'center',color:'white',fontSize:14+'px',cursor:'pointer' }} disabled={selectedRowKeys.length==0} onClick={(e)=>showModal(e)}>撤回</Button>
        </>
    )
  }
//   全选
  var changestatus=(e)=>{
    if(e.target.checked){
        props.dataSource.map((item,index)=>{
            arr.push(item.key)
            onSelectChange(arr);
        })
    }else{
      props.dataSource.map((item,index)=>{
        arr.pop()
    })
      onSelectChange([]);
    }
  }
// 分页
    var pagination = { pageSize:5,pageSizeOptions:['5']}
// 多选框
const onSelectChange = (newSelectedRowKeys) => {
  console.log(newSelectedRowKeys);
    props.getOnSelectChange(newSelectedRowKeys)
    setSelectedRowKeys(newSelectedRowKeys);
};
let rowSelection = {
    selectedRowKeys,
    columnTitle:'选择',
    columnWidth:45,
    onChange: onSelectChange,
};
// 指派操作
// 对话框展开
    const showModal = (e) => {
      if(e.target.innerHTML=='指 派'){
        setIsModalOpen(true);
      }else{
        setIsModalOpen1(true);
      }     
    };
// 确认指派对话框(1为入库，2为出库)
    const handleOk = () => {
      if(props.status==1){
        for(let i=0;i<selectedRowKeys.length;i++){
          warehousingmanagement_patch(selectedRowKeys[i],{warehouse:value1,receipt:value2,storeKeeper:value3}).then((res)=>{
            props.datasource()
            success("指派成功")
            setloading(true);
            setTimeout(() => {
                setloading(false)
            }, 500);
          })
        }
        setIsModalOpen(false);
      }else{
        for(let i=0;i<selectedRowKeys.length;i++){
          DeliveryManagement_patch(selectedRowKeys[i],{warehouse:value1,people:value2,storeKeeper:value3}).then((res)=>{
            props.datasource()
            success("指派成功")
            setloading(true);
            setTimeout(() => {
                setloading(false)
            }, 500);
          })
        }
        setIsModalOpen(false);
      }
    };

// 取消对话框
    const handleCancel = () => {
      setIsModalOpen(false);
      setIsModalOpen1(false);
      setIsModalOpen2(false);
      setIsModalOpen3(false);
    };
// 存放指派的3个输入框内容
    var onchange=(e)=>{
      if(e.target.name=='value1'){
        setvalue1(e.target.value)
      }else if(e.target.name=='value2'){
        setvalue2(e.target.value)
      }else{
        setvalue3(e.target.value)
      }
    }
// 确认撤回对话框
    const handleOk1 = () => {
      if(props.status==1){
        for(let i=0;i<selectedRowKeys.length;i++){
          warehousingmanagement_patch(selectedRowKeys[i],{warehouse:'',receipt:'',storeKeeper:''}).then((res)=>{
            props.datasource()
            success("撤回指派成功")
            setloading(true);
            setTimeout(() => {
                setloading(false)
            }, 500);
          })
        }
      }else{
        for(let i=0;i<selectedRowKeys.length;i++){
          DeliveryManagement_patch(selectedRowKeys[i],{warehouse:'',people:'',storeKeeper:''}).then((res)=>{
            props.datasource()
            success("撤回指派成功")
            setloading(true);
            setTimeout(() => {
                setloading(false)
            }, 500);
          })
        }
      }
      
        setIsModalOpen1(false);
    };
    
// 新增区域
  var addregion=(record)=>{
    setname(record.name)
    warehousemanagement_table().then((res)=>{
      setlist(res.data)
    })
    setIsModalOpen2(true);
  }
  const onFinish2=(value)=>{
    value.Warehouse=name ;
    value.key=String(list.length+1) ;
    value.id=String(list.length+1) ;
    warehousemanagement_add(value).then((res)=>{
      setIsModalOpen2(false);
      success("新增区域仓库数据成功")
      setloading(true);
      setTimeout(() => {
          setloading(false)
      }, 500);
    })
  }

  // 显示地图
  const show=(record)=>{
    switch(record.id){
      case "1":setlocation([116.648808,40.312667]);break;
      case '2':setlocation([108.849956,34.500966]);break;
      case '3':setlocation([104.629063,30.022716]);break;
      case '4':setlocation([119.608355,32.201868]);break;
      case '5':setlocation([112.559139,24.354915]);break;
      case '6':setlocation([108.66019,29.13188]);break;
    }
    console.log(location);
    setIsModalOpen3(true);
  }


    return (
        <div>
          {contextHolder}
            <Table columns={props.status==1?columns1:props.status==2?columns2:props.status==3?columns3:props.status==4?columns4:props.status==5?columns5:columns6} dataSource={props.dataSource} pagination={pagination} rowSelection={props.status==1?rowSelection:props.status==2?rowSelection:props.status==4?rowSelection:props.status==5?rowSelection:undefined} footer={props.status==1?footer:props.status==2?footer:undefined} bordered loading={loading}/>
            <Modal title="指派" open={isModalOpen} onOk={handleOk} onCancel={handleCancel} cancelText={'取消'} okText={'确定'}>
              <Input style={{marginTop:10+'px'}} placeholder="入货仓库" onChange={(e)=>{onchange(e)}} name='value1' />
              <Input style={{marginTop:10+'px'}} placeholder="收货员" onChange={(e)=>{onchange(e)}} name='value2' />
              <Input style={{marginTop:10+'px'}} placeholder="仓管员" onChange={(e)=>{onchange(e)}} name='value3' />
            </Modal>
            <Modal title="提示" open={isModalOpen1} onOk={handleOk1} onCancel={handleCancel} cancelText={'取消'} okText={'确定'}>
              <p>确定撤回，重新指派负责人吗?</p>
            </Modal>
            {/* 新增区域 */}
            <Modal title="Basic Modal" open={isModalOpen2}   footer={[]}>
            <Form
                name="basic"
                className='basic'
                labelCol={{ span: 6 }}
                wrapperCol={{ span: 18 }}
                initialValues={{ remember: true }}
                onFinish={onFinish2}
                >
                <div className='zhan' style={{height:20}}></div>
                <Form.Item
                    name="region"
                    label='区域'
                    rules={[{ required: true, message: '供应商编号所属仓库不能为空' }]}
                >
                    <Input placeholder='请输入所属仓库  ' />
                </Form.Item>
                <Form.Item
                    name="goodsshelves"
                    label='货架号'
                    rules={[{ required: true, message: '供应商编号所属仓库不能为空' }]}
                >
                    <Input placeholder='请输入所属仓库  ' />
                </Form.Item>
                <Form.Item
                    name="locator"
                    label='库位号'
                    rules={[{ required: true, message: '供应商编号所属仓库不能为空' }]}
                >
                    <Input placeholder='请输入所属仓库  ' />
                </Form.Item>

                <Form.Item wrapperCol={{ offset: 7, span: 16 }}>
                    <Button type="primary" htmlType="submit" onClick={onFinish2} style={{marginRight:20+'px'}}>
                        确认新增
                    </Button>
                    <Button onClick={handleCancel} style={{marginLeft:20+'px'}}>
                        取消
                    </Button>
                </Form.Item>
            </Form>
            </Modal>
            {/* 显示地图 */}
            <Modal title="Basic Modal" open={isModalOpen3} onOk={handleCancel} onCancel={handleCancel}  cancelButtonProps={{style:{display:'none'}}}>
              <Mapp center={location}></Mapp>
            </Modal>
        </div>
    );
}


export default Table1;